<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	
		<title>动态组件</title>
		<div id="app">
			Component:{{componentIndex}}
			<button @click="change"> 点击我</button>
			
		<component :is="componentName"></component>
	<!-- 	<component :is="'test2'"></component> -->
		
		</div>
	</head>
	<body>
		<script>
			
			Vue.component("test1",{
				template:'<h3>这是第一个测试1</h3>'
				})
			Vue.component("test2",{
				template:'<h1>这是第二个测试2</h1>'
				})
			Vue.component("test3",{
				template:'<h2>这是第三个测试3</h2>'
				})
	
			// new Vue({
			// 	el:"#app",
			// 	data:{
			// 		componentIndex:1
			// 	},
			// 	methods:{
			// 		change:function(){
						
			// 			if(this.componentIndex<3){
			// 				this.componentIndex++;
			// 			}else{
			// 				this.componentIndex=1;
			// 			}
			// 			// this.componentIndex++;
			// 		}
			// 	}
			// })
			new Vue({
				el:"#app",
				data:{
					componentIndex:1
				},
			computed:{
					componentName:function(){
						return "test"+this.componentIndex;
						
			}
		},
				methods:{
					change:function(){
						// this.componentIndex=(this.componentIndex++)%3+1
						this.componentIndex=(this.componentIndex++)%3+1 //1除以3 余3？ 循环
					
					}
				}
			})
			
		</script>
	
	</body>
</html>
